<template>
	<view class="main">
		<scroll-view class="session_list" scroll-y @scrolltolower="lower">
			<view v-for="(item,index) in messageList" class="msg-item" @click="toDetail(item.CommunityId)">
				<view class="user-img">
					<image :src="item.AvatarUrl"></image>
				</view>
				<view class="desc">
					<view class="name">
						{{item.SendName}}
					</view>
					<view class="content">
						{{item.Content}}
					</view>
				</view>
				<view class="community-content">
					<image v-if="item.CommunityImg" :src="item.CommunityImg" mode=""></image>
					<view v-else>{{item.CommunityContent}}</view>
				</view>
			</view>
			<view v-if="!loadAll && !autoGet" class="more d-c" @click="getMore">
				查看更早的消息...
			</view>
			<view v-else-if="loadAll" class="reach-bottom">
				——世界尽头啦——
			</view>
		</scroll-view>
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				sender: this.$store.state.sender,
				messageList:[],
				page:{
					pageIndex:1,
					pageSize:10
				},
				loadAll:false,
				autoGet:false
			}
		},
		onLoad(opt) {
			let status = opt.hasNew == 1 ? 0 : 1;
			this.getCommunityMessageList(status);
			if(opt.hasNew == 1){
				this.updateCommunityContentStateById();
			}
		},
		methods:{
			toDetail(id){
				// var str = encodeURIComponent(JSON.stringify(val));
				this.$Common.navigateTo("/community/communityDetail", {
					id
				});
			},
			getMore(){
				this.getCommunityMessageList(1,this.page,true)
				this.autoGet = true;
			},
			lower(){
				if(!this.autoGet) return;
				this.page.pageIndex +=1;
				this.getCommunityMessageList(1,this.page);
			},
			getCommunityMessageList(status=0,page=null,hasExtra=false){
				if(this.loadAll) return;
				let model = {
					receiverId:this.sender.Id,
					status:status
				}
				if(page != null){
					model.pageIndex = page.pageIndex;
					model.pageSize = page.pageSize;
					model.extra = hasExtra ? this.messageList.length : 0;
				}
				this.$Request.post(this.$Config.APIURL + "/api/getCommunityMessageList", model).then(res => {
					if (res?.code == 200) {
						if(res?.data?.length > 0){
							this.messageList.push(...res.data);
							if(res?.data?.length <10 && status == 1){
								this.loadAll = true;
							}
						}else{
							this.loadAll = true;
						}
					}
				});
			},
			updateCommunityContentStateById(){
				let model = {
					receiverId:this.sender.Id,
					status:1
				}
				this.$Request.post(this.$Config.APIURL + "/api/updateCommunityContentStateById", model).then(res => {
					if (res?.code == 200) {
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		height: 100vh;
		width: 100%;
		padding: 20rpx;
		.session_list {
			height: 100%;
			width: 100%;
			overflow: auto
		}
		.more{
			height: 100rpx;
			width: 100%;
			color: #d8d8d8;
		}
		.reach-bottom{
			width: 100%;
			padding: 20rpx;
			color: #ccc;
			font-size: 26rpx;
			text-align: center;
		}
		.msg-item{
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #E8E8E8;
			padding: 20rpx 0;
			.user-img{
				image{
					width: 100rpx;
					height: 100rpx;
					border-radius: 10rpx;
				}
			}
			.desc{
				width: 500rpx;
				font-size: 26rpx;
				padding: 10rpx;
				.name{
					width: 100%;
					color: #51619C;
					margin-bottom: 4rpx;
				}
				.content{
					width: 100%;
				}
			}
			.community-content{
				width: 100rpx;
				height: 100rpx;
				image{
					height: 100%;
					width: 100%;
				}
				view{
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
					font-size: 32rpx;
				}
			}
		}
	}
</style>
